window.onload = function () {  
    // 1. 顶部搜索
    search();
    // 2. 轮播图
    banner();
    // 3. 倒计时
    downTime();
};

var search = function () {  
    // 1. 默认固定顶部透明背景
    // 2. 当页面滚动的时候 --- 随着页面卷曲的高度变大， 透明度会变大
    // 3. 当页面滚动的时候 --- 超过某一个高度的时候透明度会不变
    var searchBox = document.querySelector('.jd_search_box');
    var banner = document.querySelector('.jd_banner');
    var height = banner.offsetHeight;
    // 监听页面滚动事件
    window.onscroll = function () {
        // console.log(document.body.scrollTop);    
        // console.log(document.documentElement.scrollTop);    
        // console.log(window.pageYOffset);    移动端开发，这个兼容性问题可以不用考虑
        var scrollTop = document.documentElement.scrollTop;
        console.log(scrollTop);
        // 默认的透明度
        var opacity = 0;
        if (scrollTop < height) {
            // 实现功能2
            opacity = scrollTop / height *0.85;
        }else {
            // 实现功能3
            opacity = 0.85;

        } 
        // 设置透明度
        searchBox.style.background = 'rgba(201, 21, 35,'+ opacity + ')';
    }
};

var banner = function () {  
    // 1. 自动轮播图且无缝  --- 定时器，c3过渡
    // 2. 点要随着图片的轮播改变 --- 根据索引切换图片
    // 3. 滑动效果 --- 利用touch事件
    // 4. 滑动结束的时候，如果滑动的距离不超过屏幕的1/3， 就吸附回去 --- 动画（过渡）
    // 4. 滑动结束的时候，如果滑动的距离超过屏幕的1/3， 切换图片（上一张或者下一张） --- 根据滑动的方向 + 过渡

    // 轮播图
    var banner = document.querySelector('.jd_banner');
    // 获取屏幕的宽度 : 目的主要是实现功能3，4
    var width = banner.offsetWidth;
    // 图片容器
    var imageBox = banner.querySelector('ul:first-child');
    // 点容器
    var pointBox = banner.querySelector('ul:last-child');
    // 所有的点
    var points = pointBox.querySelectorAll('li');


    // 小优化： 在制作自动播放无缝连接的时候，添加过渡，做位移和清除过渡这3个操作是会经常用到的，就可以封装成一个函数
    var addTransition = function () {  
        imageBox.style.transition = 'all 0.2s';
        imageBox.style.webkitTransition = 'all 0.2s';
    };
    var removeTransition = function () {  
        imageBox.style.transition = 'none';
        imageBox.style.webkitTransition = 'none';
    };
    var setTranslateX = function (translateX) {  
        imageBox.style.transform = 'translateX(' + translateX + 'px)';
        imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
    }

    // 程序的核心 index
    var index = 1;
    var timer = setInterval(function () {
        index++;  
        // 加过渡: js操作的时候也需要做兼容
        addTransition();
        // 做位移: 根据索引做位移，每一次都移动屏幕的宽度,注意这个图片是往左移的，是负的
        setTranslateX(- index * width);
    
    }, 1000);
    // 实现无缝的效果： 需要等到最后一张动画结束去判断是否瞬间定位到第一张图， 我们这里总共有10张
    imageBox.addEventListener('transitionend', function () {  
        // 只能在自动滚动的时候使用这个方法来实现无缝
        if (index >= 9) {
            index = 1;
            // 实现瞬间定位
            // 1. 清除过渡
            addTransition();
            // 2. 做位移
            setTranslateX(- index * width);
        }else if (index <= 0) {
            // 用户滑动的时候也需要实现无缝：因为滑动的时候方向是不确定的，可能往左也可能往右
            index = 8;
            // 实现瞬间定位
            // 1. 清除过渡
            removeTransition();
            // 2. 做位移
            setTranslateX(- index * width);
        }
        

    });
};

var downTime = function () {  };